<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11计算属性完整写法</title>
</head>
<body>
  <div id="app">

  姓：<input type="text" v-model="firstName" style="width: 30px;"> 
  + 名：<input type="text" v-model="secendName" style="width: 30px;"> = {{fullName}}
  <button @click="changeName">改名卡</button>
  </div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
        el: "#app",
        data: {
          firstName: "",
          secendName:""
        },
        methods:{
          changeName(){
            this.fullName =  '皇子';
          }
        },
        computed:{
          // fullName(){
          //   return this.firstName + this.secendName;
          // }
          //完整写法
         
          fullName:{
          //获取
            get(){
                return this.firstName + this.secendName;
            },
            //设置
            set(value){
             this.firstName = value.slice(0,1);
             this.secendName = value.slice(1);
            }

          }
          
        }
      });

</script>

</body>
</html>